<template>
  <div class="demo7">
    <div class="page">
      <div class="prev" @click="editIndex" :class="{
      'disable':curIndex==0
      }">
        &lt
      </div>
      <span class="first">{{curIndex}}</span> / <span class="total">{{totalNumber}}</span>
      <div class="next" @click="addIndex" :class="{
      'disable':curIndex>=totalNumber
      }">
        &gt
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'demo7',
    components: {},
    props: {},
    data() {
      return {
        curIndex: 0,//当前页数
        totalNumber: 2//总页数
      };
    },
    mounted() {
    },
    methods: {
      //增加按钮点击事件
      addIndex() {
        //如果当前页数大于等于总页数,不做操作,否则,当前页数加有一个
        if (this.curIndex >= this.totalNumber) {
          return
        } else {
          //当前页增加
          this.curIndex++
        }


      },
      //减少按钮点击事件
      editIndex() {
        //如果当前页数debg等于0,不做操作,否则,当前页减少一个
        if (this.curIndex == 0) {
          return

        } else {
          //当前页减少
          this.curIndex--
        }

      }
    },
    computed: {}
  };
</script>

<style scoped lang="less">
  .demo7 {
    .page {
      .prev, .next {
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 3px;
        cursor: pointer;

        &.disable {
          color: #999;
          border-color: #999;
          cursor: no-drop;
        }

        &:hover {
          border-color: blue;
          color: blue;
        }
      }

      .first {
        margin-right: 2px;
      }

      .total {
      }


    }
  }
</style>
<style lang="less">
  .demo7 {
  }
</style>
